<template>
  <el-card shadow="hover" class="my-5">
    <el-skeleton :rows="2" animated :loading="loading">
      <div>
        <span class="inline-block w-56 px-8 py-2">{{ $t("商户账号") }}</span>
        <span>{{ info.merchant_name }}</span>
      </div>
      <div>
        <span class="inline-block w-56 px-8 py-2">{{ $t("商户ID") }}</span>
        <span>{{ info.merchant_id }}</span>
      </div>
      <div v-if="info.secret_key">
        <span class="inline-block w-56 px-8 py-2">{{ $t("商户秘钥") }}</span>
        <span>{{ info.secret_key }}</span>
      </div>
      <div v-if="info.callback_url">
        <span class="inline-block w-56 px-8 py-2">{{ $t("支付回调URL") }}</span>
        <span>{{ info.callback_url }}</span>
      </div>
      <div v-if="info.success_url">
        <span class="inline-block w-56 px-8 py-2">{{ $t("支付成功URL") }}</span>
        <span>{{ info.success_url }}</span>
      </div>
      <div>
        <span class="inline-block w-56"></span>
        <span v-if="info.callback_url">
          <el-button
            type="primary"
            :icon="Edit"
            class="w-32 my-5"
            size="large"
            @click="handleOpen"
          >
            {{ $t("编辑") }}</el-button
          ></span
        >
      </div>
    </el-skeleton>
  </el-card>
  <DialogForm
    :dialogVisible="dialogVisible"
    @closeDialog="handleClose"
    @submitForm="handleSubmitForm"
    :form="dialogForm"
  />
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { GetNewMerchantInfo, merchantUpdateApi } from "@/api/merchant/index";
import DialogForm from "./components/DialogForm.vue";
import { ElMessage } from "element-plus";
import { Edit } from "@element-plus/icons-vue";
const loading = ref(false);
const info = reactive({});
const dialogVisible = ref(false);
const dialogForm = reactive({});

const getData = async () => {
  try {
    loading.value = true;
    const res = await GetNewMerchantInfo(); // 在 try 块内赋值 res
    Object.assign(info, res);

    loading.value = false;
  } catch (error) {
    loading.value = false;
  }
};
const handleOpen = () => {
  Object.assign(dialogForm, {
    callback_url: info.callback_url,
    success_url: info.success_url,
  });
  dialogVisible.value = true;
};
const handleClose = () => {
  dialogVisible.value = false;
  Object.assign(dialogForm, {
    callback_url: "",
    success_url: "",
  });
};
// 提交
const handleSubmitForm = async (param) => {
  try {
    const res = await merchantUpdateApi(param);
    ElMessage({
      showClose: true,
      message: "提交成功",
      type: "success",
    });
    handleClose();
    getData();
  } catch (error) {
    handleClose();
  }
};
onMounted(() => {
  getData();
});
</script>
<style>
/* .span.px-8.py-2.inline-block.text-xl {
  width: 300px;
}; */
.text-xl {
  width: 300px;
}
</style>
